<template>
	<view class="uni-tab-bar">
		<scroll-view scroll-x="true" class="uni-swiper-tab" :style="scrollStyle">
			<block v-for="(item,index) in tabBar" :key="index">
				<view class="swiper-tab-list" :class="{'active':tabIndex === index }"
				@tap="tabtap(index)"
				:style="scollItemStyle">
					{{item.name}}<text v-show="item.num" style="padding-left: 5upx;">{{item.num}}</text>
					<view class="swiper-tab-line":style="tablineStyle">
					</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props:{
			tabBar: Array,
			tabIndex: Number,
			scrollStyle: {
				type: String,
				default: ''
			},
			scollItemStyle: {
				type: String,
				default: ''
			},
			tablineStyle: {
				type: String,
				default: ''
			}
		},
		methods:{
			// tap点击事件
			tabtap(index){
				this.$emit('tabtap', index)
			},
		}
	}
</script>

<style scoped lang="scss">
	.uni-tab-bar{
		width: 100%;
		overflow: hidden;
		position: absolute;
		z-index: 12;
		height: auto;
		background-color: #fff;
		.uni-swiper-tab{
			border-bottom: none;
			.swiper-tab-list{
				color: #969696;
				font-weight: bold;
			}
			.active{
				color:#343434;
				.swiper-tab-line{
					border-bottom: 6upx solid #fede33;
					width: 70upx;
					margin: auto;
					border-top: 6upx solid #fede33;
					border-radius: 20upx;
				}
			}
		}
	}
</style>
